<script setup lang="ts">
import { reactive } from 'vue';
import AccountInfo from '../components/AccountInfo.vue'
import { transferListAPI, incomeListAPI } from '@/api/my'
import AccountList from '../components/AccountList.vue';
// 点击返回 关闭弹窗
const onClickLeft = () => history.back()

const tabs = [
  {
    type: 0,
    text: '全部'
  },
  {
    type: 1,
    text: '收入'
  },
  {
    type: 2,
    text: '提现'
  },
]
const state = reactive({
  check: tabs[0].type,
  loading: false,
  list: []
})
// 选择tabs
const toCheck = async(val) => {
  state.check = val
  state.list = []
  // 选择全部 获取两个列表数据
  if (val == 0) {
    await getTransferList()
    await getIncomeList()
    state.list = state.list.flat(2)
  }
  else if(val == 1) {
    await getIncomeList()
    state.list = state.list.flat(2)
  }
  else if(val == 2) {
    await getTransferList()   
    state.list = state.list.flat(2)
  }
}
// 提现列表数据
const getTransferList = async() => {
  state.loading = true
  const res = await transferListAPI()
  if (res) {
    state.list.push(res)
  }
  state.loading = false
}
// 账户收益列表数据
const getIncomeList = async() => {
  state.loading = true
  const res = await incomeListAPI()
  if (res) {
    state.list.push(res)
  }
  state.loading = false
}
toCheck(0)

</script>

<template>
    <van-nav-bar
        title="我的账户"
        left-arrow
        @click-left="onClickLeft"
    />
    <AccountInfo />
    <dl>
      <dt 
        v-for="(item,index) in tabs" 
        :key="index" 
        :class="state.check==index?'active':''"
        @click="toCheck(item.type)"
      >
      {{ item.text }}
      </dt>
    </dl>
    <AccountList :list="state.list" />
</template>

<style scoped>
  >>>.van-nav-bar__content{
    background: #FF8E00;
  }
  >>>.van-nav-bar__title,>>>.van-icon-arrow-left:before{
    color: #ffffff;
  }
  .van-hairline--bottom:after{
    border: 0;
  }
  dl{
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-around;
  }
  dl dt{
    padding: 1.47rem 0 0.59rem;
    font-size: 0.75rem;
    line-height: 0.75rem;
    font-weight: 500;
    color: #666666;
  }
  dl dt.active{
    color:#FF8E00;
    border-bottom: 1px solid #FF8E00;
  }
</style>